﻿<html>
<head>
    <title></title>
    <script type="text/javascript" src="~/Script/Game.js"></script>
    <script type="text/javascript" src="~/Script/GameUI.js"></script>
    <script type="text/javascript" src="~/Script/jquery.js"></script>
    <script type="text/javascript" src="~/Script/jquery-ui.min.js"></script>
    <link href="~/CSS/jquery-ui.min.css" rel="stylesheet">
    <link href="~/CSS/jquery-ui.theme.min.css" rel="stylesheet">
    <script>
        var log = function (s) {
            if (document.readyState !== "complete") {
                log.buffer.push(s);
            } else {
                document.getElementById("output").innerHTML += (s + "\n");
            }
        }
        log.buffer = [];
        var socket = null;
        function init() {
            window.WebSocket = window.WebSocket || window.MozWebSocket;
            if (!window.WebSocket) {
                log("WebSocket not supported by this browser");
                return;
            }
            var webSocket = new WebSocket("ws://121.199.16.71:13001/");
            //var webSocket = new WebSocket("ws://localhost:13001/");
            webSocket.onopen = onopen;
            webSocket.onclose = onclose;
            webSocket.onmessage = onmessage;

            socket = webSocket;
        }

        function onopen() {
            log("Open a web socket.");
        }

        function onclose() {
            log("Close a web socket.");
        }

        //对话框的初始化操作
        var MinionPosDialog;
        var TargetPosDialog;
        var SpellDecideDialog;
        var MessageDialog;
        var ActionDialog;

        $(function () {

            MinionPosDialog = $("#formMinionPos").dialog({
                autoOpen: false,
                modal: true,
                width: 1100,
                height: 300
            });

            TargetPosDialog = $("#formTargetPos").dialog({
                autoOpen: false,
                modal: true,
                width: 1100,
                height: 400,
                close: function () {
                    AfterTargetPos();
                }
            });
            SpellDecideDialog = $("#formSpellDecide").dialog({
                autoOpen: false,
                modal: true,
                width: 600,
                height: 250
            });
            MessageDialog = $("#formDialog").dialog({
                autoOpen: false,
                modal: true
            });
            ActionDialog = $("#formAction").dialog({
                autoOpen: false,
                modal: true,
                width: 450,
                height: 300
            });
        });
    </script>
</head>
<body onload="init()">
    <form>
        <input type="hidden" id="output" />
        <svg id="gamePanel" width="1600" height="750" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect width="1600" height="750" stroke="lightgreen" fill="transparent" stroke-width="2" />
            <!--注意如果文字在上面，则文字图层会覆盖按钮图层，造成OnClick事件无法响应-->
            <svg id="btnCreateGame" x="100" y="30" height="40" width="80" onclick="CreateGame(false)" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <image xlink:href="~/images/BackGround.jpg" x="0" y="0" width="80" height="40" />
                <text x="40" y="25" text-anchor="middle" fill="white">对战模式</text>
            </svg>
            <svg id="btnCreateSingleGame" x="200" y="30" height="40" width="80" onclick="CreateGame(true)" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <image xlink:href="~/images/BackGround.jpg" x="0" y="0" width="80" height="40" />
                <text x="40" y="25" text-anchor="middle" fill="white">冒险模式</text>
            </svg>
            <!--style.display 好像不能使用，如果一开始是不可见的状态 -->
            <svg id="btnEndTurn" display="none" x="300" y="30" height="40" width="80" onclick="EndTrun()" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <image xlink:href="~/images/BackGround.jpg" x="0" y="0" width="80" height="40" />
                <text x="40" y="25" text-anchor="middle" fill="white">结束回合</text>
            </svg>
        </svg>
        <svg display="none" id="BasicPlayerInfo">
            <!-- 是否能攻击的标志 -->
            <rect id="rctAttackable" x="0" y="90" width="50" height="10" stroke="lightgreen" fill="pink" stroke-width="2" />
            <!-- 武器-->
            <image xlink:href="~/images/Weapon.jpg" x="0" y="100" height="50" width="50" />
            <svg id="HeroInfo" x="50" y="0">
                <!-- Hero -->
                <image id="imgHero" xlink:href="~/images/Hero.jpg" x="0" y="0" height="150" width="150" />
                <!--左下角的攻击力 -->
                <rect x="0" y="120" width="30" height="30" stroke="lightgreen" fill="purple" stroke-width="2" />
                <text id="txtHeroAttackPoint" x="15" y="135" font-size="15" text-anchor="middle" fill="white">0</text>
                <!--右下角的护盾值 -->
                <rect x="120" y="90" width="30" height="30" stroke="lightgreen" fill="blue" stroke-width="2" />
                <text id="txtHeroShieldPoint" x="135" y="105" font-size="15" text-anchor="middle" fill="white">0</text>
                <!--右下角的生命值 -->
                <rect x="120" y="120" width="30" height="30" stroke="lightgreen" fill="red" stroke-width="2" />
                <text id="txtHeroLifePoint" x="135" y="135" font-size="15" text-anchor="middle" fill="white">0</text>
            </svg>
            <!-- 技能 -->
            <rect id="rctAbilityEnable" x="200" y="90" width="50" height="10" stroke="lightgreen" fill="pink" stroke-width="2" />
            <text id="txtAbilityDescription" x="300" y="100" font-size="15" text-anchor="start" fill="blue"></text>
            <image xlink:href="~/images/FireBall.jpg" x="200" y="100" height="50" width="50" />
            <!--水晶 -->
            <text id="txtCystal" x="275" y="140" font-size="15" text-anchor="middle" fill="blue">0/0</text>
            <rect id="Cystal1" x="300" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal2" x="320" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal3" x="340" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal4" x="360" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal5" x="380" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal6" x="400" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal7" x="420" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal8" x="440" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal9" x="460" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
            <rect id="Cystal10" x="480" y="130" width="20" height="20" stroke="lightgreen" fill="lightBlue" stroke-width="2" />
        </svg>
        <svg display="none" id="BasicCard" x="0" y="0" width="150" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect width="150" height="150" stroke="lightgreen" fill="transparent" stroke-width="2" />
            <!--左上角的使用成本 -->
            <rect width="30" height="30" stroke="lightgreen" fill="lightblue" stroke-width="2" />
            <text id="txtCost" x="15" y="15" font-size="15" text-anchor="middle" fill="white">0</text>
            <!--卡牌名称 -->
            <text id="txtName" x="40" y="15" font-size="15" text-anchor="start" fill="black"></text>
            <!--卡牌描述 -->
            <text id="txtDescirption1" x="20" y="55" font-size="12" text-anchor="start" fill="black"></text>
            <text id="txtDescirption2" x="20" y="75" font-size="12" text-anchor="start" fill="black"></text>
            <text id="txtDescirption3" x="20" y="95" font-size="12" text-anchor="start" fill="black"></text>

            <!--左下角的攻击力 -->
            <rect x="0" y="120" width="30" height="30" stroke="lightgreen" fill="purple" stroke-width="2" />
            <text id="txtAttackPoint" x="15" y="135" font-size="15" text-anchor="middle" fill="white">0</text>
            <!--状态-->
            <rect id="rctReadyToFight" x="30" y="120" width="150" height="30" stroke="lightgreen" fill="pink" stroke-width="2" />
            <text id="txtStatus" x="35" y="135" font-size="15" text-anchor="start" fill="blue"></text>
            <!--右下角的生命值 -->
            <rect x="120" y="120" width="30" height="30" stroke="lightgreen" fill="red" stroke-width="2" />
            <text id="txtLifePoint" x="135" y="135" font-size="15" text-anchor="middle" fill="white">0</text>
        </svg>
        <svg display="none" id="BasicButton" x="0" y="0" height="40" width="80" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <image xlink:href="~/images/BackGround.jpg" x="0" y="0" width="80" height="40" />
            <text id="txtButton" x="40" y="25" text-anchor="middle" fill="white">按钮文字</text>
        </svg>
        <div id="formMinionPos" title="选择随从位置">
            <svg id="MinionsPanel" width="1000" height="250">
            </svg>
        </div>
        <div id="formTargetPos" title="选择目标位置">
            <svg id="TargetPanel" width="1000" height="350">
            </svg>
        </div>
        <div id="formDialog" title="消息">
            <p id="txtMessage"></p>
        </div>
        <div id="formAction" title="动作效果">
            <p id="txtActionMessage"></p>
            <svg id="ActionPanel" width="400" height="160">
            </svg>
        </div>
        <div id="formSpellDecide" title="抉择">
            <svg id="SpellDecidePanel" width="500" height="150">
                <text id="txtAblitiy1" x="20" y="30" text-anchor="start" font-size="10" fill="black">效果1</text>
                <svg id="btnAblitiy1" x="400" y="30" height="40" width="80" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <image xlink:href="~/images/BackGround.jpg" x="0" y="0" width="80" height="40" />
                    <text x="40" y="25" text-anchor="middle" fill="white">选择</text>
                </svg>

                <text id="txtAblitiy2" x="20" y="90" text-anchor="start" font-size="10" fill="black">效果2</text>
                <svg id="btnAblitiy2" x="400" y="90" height="40" width="80" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <image xlink:href="~/images/BackGround.jpg" x="0" y="0" width="80" height="40" />
                    <text x="40" y="25" text-anchor="middle" fill="white">选择</text>
                </svg>
            </svg>
        </div>
    </form>
</body>
</html>
